<!--
 * @Description: 详情
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-08-14 20:18:51
 * @FilePath: /yuxiuproweb/src/views/money/wage/mods/detail.vue
-->
<template>
  <el-drawer title="详情" size="100%" :visible.sync="shows">
    <el-form
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="false"
      label-width="68px"
    ></el-form>
    <div style="margin: 0 20px 20px">
      <el-table
        :data="list"
        v-loading="loading"
        :max-height="maxHeight + 100"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          label="订单号"
          prop="orderId"
          align="center"
        ></el-table-column>
        <el-table-column
          label="工单号"
          prop="productId"
          align="center"
        ></el-table-column>
        <el-table-column
          label="工序"
          prop="processName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="金额"
          prop="price"
          align="center"
        ></el-table-column>
        <el-table-column
          label="小记"
          prop="subtotal"
          align="center"
        ></el-table-column>
        <el-table-column
          label="数量"
          prop="quantity"
          align="center"
        ></el-table-column>
        <el-table-column label="类型" prop="type" align="center">
          <template slot-scope="{ row }">
            {{
              row.type === "CL"
                ? "定制窗帘"
                : row.type === "CM"
                ? "定制窗幔"
                : row.type === "QT"
                ? "定制其他"
                : row.type === "CPYL"
                ? "定制成品原料"
                : row.type === "QB"
                ? "墙布"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="详情"
          prop="detail"
          min-width="300"
          align="center"
        ></el-table-column>
        <el-table-column
          label="完成时间"
          prop="updateTime"
          align="center"
          min-width="120"
        ></el-table-column>
        <el-table-column
          label="操作人"
          prop="updateBy"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>

<script>
import { recordList } from "@/api/money/wage";
import commonMix from "@/utils/mixins/common";
export default {
  mixins: [commonMix],
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
    queryParams: {
      type: Object,
    },
  },
  data() {
    return {
      list: [],
      loading: false,
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  created() {
    this.getRecordList();
  },
  methods: {
    getRecordList() {
      const params = {
        ...this.queryParams,
        type: undefined,
        pageNum: undefined,
        pageSize: undefined,
        yearMonth:
          this.queryParams.type === "1"
            ? this.queryParams.yearMonth
            : undefined,
        startDate:
          this.queryParams.type === "2"
            ? this.queryParams.startAndEnd?.[0]
            : undefined,
        endDate:
          this.queryParams.type === "2"
            ? this.queryParams.startAndEnd?.[1]
            : undefined,
        startAndEnd: undefined,
      };
      this.loading = true;
      recordList({
        empNo: this.data.userId,
        ...params,
      })
        .then(({ rows }) => {
          console.log(rows);
          this.list = rows || [];
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 0 20px;
}
.drawer-form {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
      margin-right: 0;
      input {
        text-align: left;
      }
    }
    .el-collapse-item__header {
      height: 65px;
      line-height: 65px;
      font-size: 16px;
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: right;
  margin: 20px;
}
</style>
